import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { IssueBarChart } from "@/components/dashboard/issue-bar-chart";
import { IssueDistributionChart } from "@/components/dashboard/issue-distribution-chart";
import { IssueSummary } from "@/components/dashboard/issue-summary";
import { PassedDonutChart } from "@/components/dashboard/passed-donut-chart";
import { PassedTrendingChart } from "@/components/dashboard/passed-trending-chart";
import { RangeToggleGroup } from "@/components/dashboard/range-toggle-group";
import { reportNamesQueryOptions } from "@/queries/reports";

export const Route = createFileRoute("/_app/")({
  loader: ({ context: { queryClient } }) => queryClient.ensureQueryData(reportNamesQueryOptions),
  component: RouteComponent,
});

function RouteComponent() {
  const { data: reports } = useSuspenseQuery(reportNamesQueryOptions);
  return (
    <div className="flex h-full w-full flex-col gap-4">
      <RangeToggleGroup reports={reports} />
      <IssueSummary />
      <div className="grid flex-1 grid-cols-4 gap-4">
        <div className="col-span-3 grid grid-rows-2 gap-4">
          <PassedTrendingChart />
          <IssueDistributionChart />
        </div>
        <div className="grid grid-rows-2 gap-4">
          <PassedDonutChart />
          <IssueBarChart />
        </div>
      </div>
    </div>
  );
}
